<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 两种js 引入方式 -->
    <script src="{{ url_for('static',filename='jquery/jq3.6.js') }}"></script>
    <script src="/echarts/echarts.min.js"></script>

</head>
<body>
    <div id="main" style="height: 500px;border: 1px solid #ccc;padding: 10px"></div>
 <script>
        $(function(){
            var mychart=echarts.init($("div")[0]);
            mychart.setOption({
                title:{
                    text:'服务器系统监控'
                },
                tooltip:{},
                legend:{
                    data:['cpu1','cpu2','cpu3','cpu4']
                },
                xAxis:{
                    data: []
                },
                yAxis:{},
                series:[
                    {
                        name:'cpu1',
                        type:'line',
                        data:[]
                    },

                    {
                        name:'cpu2',
                        type:'line',
                        data:[]
                    },

                    {
                        name:'cpu3',
                        type:'line',
                        data:[]
                    }
                    ,
                    {
                        name:'cpu4',
                        type:'line',
                        data:[]
                    }
                ]
            });

            var insert_time =["","","","","",""],
                cpu1=[0,0,0,0,0,0],
                cpu2=[0,0,0,0,0,0],
                cpu3=[0,0,0,0,0,0],
                cpu4=[0,0,0,0,0,0],
                lastId=0;//哨兵，用于记录最后一个ID
            var update_mychart=function (data){
                mychart.hideLoading();
                dataLength=data.insert_time.length;
                console.log("dataLength="+dataLength+" data="+JSON.stringify(data));
                lastId+=dataLength;//更新哨兵

                //切片
                insert_time =insert_time.slice(dataLength).concat(data.insert_time);
                cpu1 =cpu1.slice(dataLength).concat(data.cpu1.map(parseFloat));
                cpu2 =cpu2.slice(dataLength).concat(data.cpu2.map(parseFloat));
                cpu3 =cpu3.slice(dataLength).concat(data.cpu3.map(parseFloat));
                cpu4 =cpu4.slice(dataLength).concat(data.cpu4.map(parseFloat));


                //写入
                mychart.setOption({
                    xAxis: {data:insert_time},
                    series: [{
                      name:'cpu1',
                      data:cpu1
                    },{
                      name:'cpu2',
                      data:cpu2
                    },{
                      name:'cpu3',
                      data:cpu3
                    },{
                      name:'cpu4',
                      data:cpu4
                    }]
                });
                if(dataLength ==0 )
                    clearInterval(timeTicket);
            }
            mychart.showLoading();//加载
            $.get('/cpu').done(update_mychart);
            var timeTicket = setInterval(function (){
                $.post('/cpu',{id:lastId}).done(update_mychart);
            },3000);

        });

    </script>
</body>
</html>